<template>
  <div class="page">
    <div class="data-collect-content">
      <div class="header">
        <div class="content-header">
          <span class="title">数据银行</span>
          <a-button @click="updateCookie('data')">cookie更新</a-button>
          <span class="cookie-info">
            <span class="label">cookie最后更新时间：</span>
            <span>2021-10-27 18:00:00</span>
          </span>
        </div>
        <div class="setting-warp">
          <span class="label"> 画像标签位置：</span>
          <a-radio-group v-model="value">
            <a-radio :value="1"> 页面上方 </a-radio>
            <a-radio :value="2"> 页面下方 </a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="body">
        <div class="card-warp">
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="data-collect-content">
      <div class="header">
        <div class="content-header">
          <span class="title">策略中心</span>
          <a-button @click="updateCookie('strategy')">cookie更新</a-button>
          <span class="cookie-info">
            <span class="label">cookie最后更新时间：</span>
            <span>2021-10-27 18:00:00</span>
          </span>
        </div>
      </div>
      <div class="body">
        <div class="card-warp">
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
          <div class="card-box">
            <div class="card-header">粉丝会员</div>
            <div class="card-body">说明：这里可以放一两项简单描述.不带操作，仅可点击查看详情</div>
            <div class="card-footer">
              <a-button type="primary"> 采集 </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <a-modal
      v-model:visible="visible"
      title="Cookie更新"
      @ok="handleOk"
      @cancel="handleCancel"
      ok-text="确认"
      cancel-text="取消"
    >
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="Cookie更新" v-bind="validateInfos.name">
          <a-textarea v-model:value="modelRef.name" :rows="6" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRaw } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;

export default defineComponent({
  setup() {
    const value = ref<string>("1");
    const visible = ref<boolean>(false);
    const modelRef = reactive({
      name: ""
    });
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入Cookie"
        }
      ]
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
    const updateCookie = (type: string) => {
      console.log("type: ", type);
      visible.value = true;
    };
    const handleOk = () => {
      validate()
        .then(() => {
          visible.value = false;
          console.log(toRaw(modelRef));
        })
        .catch((err) => {
          console.log("error", err);
        });
    };
    const handleCancel = () => {
      visible.value = false;
      resetFields();
    };
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      value,
      visible,
      modelRef,
      resetFields,
      validateInfos,
      updateCookie,
      handleOk,
      handleCancel
    };
  }
});
</script>

<style lang="less" scoped>
@import "index.less";
</style>
